<template>
	<view>
		<view class="center-body">
			<view class="body-input">
				验证码已发送至<span>{{phone}}</span>
			</view>
			<view class="body-input">
				<span>60秒后重新获取</span>
			</view>
			<view class="body-inputx" >
				<view class="inp-inp">
					<input type="number" @blur="bcodeone" maxlength=1 value="" />
				</view>
				<view class="inp-inp">
					<input type="number" @blur="bcodetwo" maxlength=1 value="" />
				</view>
				<view class="inp-inp">
					<input type="number" @blur="bcodethree" maxlength=1 value="" />
				</view>
				<view class="inp-inp">
					<input type="number" @blur="bcodefour" maxlength=1 value="" />
				</view>
				<view class="inp-inp">
					<input type="number" @blur="bcodefive" maxlength=1 value="" />
				</view>
				<view class="inp-inp">
					<input type="number" @blur="bcodesix" maxlength=1 value="" />
				</view>
				
				
			</view>
			<view class="body-btn">
				<button type="primary" @click="resetPassword">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	import eonfox from '@/components/eonfox/eonfox.js';
	var ef = new eonfox();
	export default {
		data() {
			return {
				phone:'',
				codeone:'',
				codetwo:'',
				codethree:'',
				codefour:'',
				codefive:'',
				codesix:'',
				code:'',
				
			};
		},
		onLoad(e){
			this.phone=e.phone;
			console.log("电话",this.phone);
			
		},
		methods:{
			resetPassword:function() {
				
				var phone=this.phone;
				 var code=this.code;
				 code=this.codeone+this.codetwo+this.codethree+this.codefour+this.codefive+this.codesix;
			      console.log(code);
				
					 uni.navigateTo({
					 	url:
					 		'../../pagesA/reset_password/reset_password?phone=' +
					 		this.phone +
					 		'&code=' +
					 		code
             
					 });
					 
					 
			},
			bcodeone:function(event){
				this.codeone= event.target.value;
			},
			bcodetwo:function(event){
				this.codetwo= event.target.value;
			   
			},
			bcodethree:function(event){
				this.codethree= event.target.value;
			   
			},
			bcodefour:function(event){
				this.codefour= event.target.value;
			   
			},
			bcodefive:function(event){
				this.codefive= event.target.value;
			   
			},
			bcodesix:function(event){
				this.codesix= event.target.value;
			   
			},
			
		}
	}
</script>

<style>
	.center-body{
		width: 92%;
		margin-left: 4%;
		margin-top: 20px;
	}
	.body-input{
		width: 100%;
		height: 30px;
		font-size: 14px;
	}
	.body-inputx{
		width: 100%;
		height: 50px;
		font-size: 14px;
		margin-top: 10px;
		margin-bottom: 30px;
	}
	/* .body-inputx input{
		width: 13%;
		height: 90%;
		border: #C8C7CC 1px solid;
		float: left;
		margin-right: 2.9%;
		font-size: 15px;
		text-align: center;
	} */
	/* .input-box{
		width: 13%;
		height: 90%;
		border: #C8C7CC 1px solid;
		float: left;
 		margin-right: 2.9%; 
		font-size: 15px;
		text-align: center;
		padding: 0px;
	} */
	.inp-inp{
		width: 13%;
		height: 90%;
		border: #C8C7CC 1px solid;
		float: left;
		margin-right: 2.9%; 
		font-size: 15px;
		text-align: center;
		padding: 0px;
	}
	.inp-inp input{
		float: left;
		height: 100%;
		width: 100%;
	}
	
	
	.body-btn button{
		background-color:#F76968;
	}
</style>
